<template>
  <nav class="menu-container">
    <router-link
      v-for="item in items"
      :key="item.name"
      :to="{ name: item.name }"
      active-class="selected"
    >
      <div class="icon">
        <Icon :type="item.icon" />
      </div>
      <span>{{ item.title }}</span>
    </router-link>
  </nav>
</template>

<script lang="ts" setup>
import Icon from '@/components/Icon/index.vue'
import { ref } from 'vue'

interface IMenu {
  name: string
  title: string
  icon: string
  startWith?: boolean
}

const items = ref<IMenu[]>([
  {
    name: 'Home',
    title: '首页',
    icon: 'home'
  },
  {
    name: 'Blog',
    title: '文章',
    icon: 'blog'
  },
  {
    name: 'About',
    title: '关于我',
    icon: 'about'
  },
  {
    name: 'Project',
    title: '项目&效果',
    icon: 'code'
  },
  {
    name: 'Message',
    title: '留言板',
    icon: 'chat'
  }
])
</script>

<style lang="less" scoped>
@import '@/styles/var.less';
.menu-container {
  color: @gray;
  margin: 24px 0;
  a {
    &.selected {
      background: darken(@words, 3%);
    }
    padding: 0 50px;
    display: block;
    display: flex;
    align-items: center;
    height: 45px;
    .icon {
      width: 24px;
    }
    &:hover {
      color: #fff;
    }
  }
}
</style>
